<template>
  <div class="channel-box">

    <van-tabs sticky @change="changeFn">
      <van-tab v-for="item in brotherCategory" :key="item.id" :title="item.name" >
        <h4>{{ item.name }}</h4>
        <p>{{ front_desc }}</p>
        <!-- 产品列表 -->
        <Products :goodsList="goodsList" />

      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { GetCateGoryData, GetCateGoryList } from "@/https/http";
import Products from "@/components/Products";

export default {
  name: "channel",
  data() {
    return {
      id_: "0", // 当前类别的id
      page: 1, // 当前页数
      size: 1000, //每页显示条数
      brotherCategory: [], // 分类数组
      goodsList: [], //当前类别对应的商品列表
      front_desc: "",
    };
  },
  created() {
    this.id_ = this.$route.query.id;
    this.getCategoryData();  //获取所有分类数据
    this.getCategoryListData();  //获取当前类别对应的产品数组
  }, 
  methods: {
    //获取所有分类数据
    getCategoryData() {
      GetCateGoryData({ id: this.id_ }).then((res) => {
        this.brotherCategory = res.data.brotherCategory; // 全部分类数组
        this.currentCategory = res.data.currentCategory; // 当前分类对象
        this.front_desc = this.currentCategory.front_desc; // 当前类别文字描述
      });
    },

    //获取当前类别对应的产品数组
    getCategoryListData() {
      GetCateGoryList({
        categoryId: this.id_,
        page: this.page,
        size: this.size,
      }).then((res) => {
        console.log(33, res);
        if (res.errno == 0) {
          this.goodsList = res.data.goodsList;
        }
      });
    },

    // / 切换分类
    changeFn(title, name) {
      // title 下标
      // name: 分类标题
      this.brotherCategory.forEach((item) => {
        if (item.name == name) {
          this.id_ = item.id;
        }
      });
      this.getCategoryListData();
      this.getCategoryData();
    },
  },
  
  components: {
    Products,
  },
};
</script>

<style lang="less" scoped>
.channel-box {
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  p {
    color: #666;
  }
}
</style>